<template>
  <div class="edit-box">
    <div class="label-box-content">
      <el-row :gutter="24" type="flex">
        <!-- 表格 end-->
        <el-col :span="24">
          <div class="content-box">
            <NewCard
              :isright="true"
              :border="false"
              title="编辑中心"
              class="table"
            >
              <template #right>
                <ComForm
                  @EventChange="ChangeFn"
                  @EventReset="reset"
                  :list="comForm"
                  @EventOnsubmit="inquireFn"
                ></ComForm>
                <el-popover placement="bottom" width="200" trigger="click">
                  <div @click="add('top')">政策</div>
                  <div @click="add('qa')">问答</div>
                </el-popover>
              </template>
              <div>
                <ComTable
                  @Eventdblclick="dbClickFn"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange"
                  :pagination="{
                    total: pageing.total,
                    pageNum: pageing.pageNum,
                    pageSize: pageing.pageSize,
                  }"
                  :list="tableList"
                  :modes="tableModes"
                >
                  <el-table-column
                    #default="{ row }"
                    align="left"
                    width="100"
                    label="操作"
                  >
                    <template v-if="row.status == 5">
                      <span
                        :class="'upBtn'"
                        v-if="currentSelectType == 'law'"
                        v-hasPermi="['doc:law:updateStatus']"
                        >上架</span>
                      <span
                        :class="'upBtn'"
                        v-if="currentSelectType == 'top'"
                        v-hasPermi="['doc:top:updateStatus']"
                        @click="getDownOrUp(4, row)"
                        >上架</span
                      >
                      <span
                        v-if="currentSelectType == 'qa'"
                        v-hasPermi="['doc:qa:updateStatus']"
                        :class="'upBtn'"
                        @click="getDownOrUp(4, row)"
                        type="primary"
                        >上架</span
                      >
                    </template>
                  </el-table-column>
                </ComTable>
              </div>
            </NewCard>
          </div>
        </el-col>
        <!-- 表格 end-->
        <!-- 编辑 -->
        <!-- <el-col :span="8">
          <div class="editFrom-box">
            <NewCard title="编辑">
              <el-form
                ref="form"
                :model="editFrom"
                label-width="100px"
                label-position="left"
              >
                <el-form-item label="发布单位">
                  <el-input
                    v-model="editFrom.unit"
                    placeholder="请输入..."
                  ></el-input>
                </el-form-item>
                <el-form-item label="适用区域">
                  <el-input
                    v-model="editFrom.area"
                    placeholder="请输入..."
                  ></el-input>
                </el-form-item>
                <el-form-item label="效力级别">
                  <el-input
                    v-model="editFrom.rank"
                    placeholder="请输入..."
                  ></el-input>
                </el-form-item>
                <el-form-item label="时效性">
                  <el-input
                    v-model="editFrom.timeliness"
                    placeholder="请输入..."
                  ></el-input>
                </el-form-item>
                <el-form-item label="发布日期">
                  <el-date-picker
                    v-model="editFrom.releaseDate"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="生效日期">
                  <el-date-picker
                    v-model="editFrom.effectiveDate"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <wangEditor :list="listtable"></wangEditor>
              </el-form>
              <SubBtn>
                <template slot="btn">
                  <el-button round>重置</el-button>
                  <el-button type="primary" round>保存</el-button>
                </template>
              </SubBtn>
            </NewCard>
          </div>
        </el-col> -->
        <!-- 编辑 end-->
      </el-row>
    </div>

    <Comdrawer
      size="60%"
      :title="drawerTitle"
      @eventColse="handleClose"
      :drawer="drawer"
    >
      <Law ref="law" :data="dataObject" :modes="comForm.modes" v-show="idType == 1"></Law>
      <Top :data="dataObject" v-show="idType == 2"></Top>
      <Qa :data="dataObject" v-if="idType != 2 && idType != 1"></Qa>
      <el-row type="flex" justify="end" class="row-bg" style="margin-top: 30px">
      </el-row>
      
      <!-- 按钮 -->
      <SubBtn>
        <template slot="btn">
          <div class="buttonBox">
            <el-button
              @click="submit"
              type="primary"
              v-show="idType == 1 && canEdit"
              :class="'cashIsFocus'"
              round
              v-hasPermi="['doc:law:edit']">
              {{comForm.modes[0].value == '5' ? '上架':'提交'}}
            </el-button>
            <!-- 需求比要急，没有优化权限 -->
            <el-button
              v-if="currentSelectType == 'law' && isShowDown != 0"
              round
              class="downOff"
              v-show="isDown"
              @click="getDownOrUp(5)"
              v-hasPermi="['doc:law:updateStatus']"
              >下架</el-button
            >
            <el-button
              v-if="currentSelectType == 'qa' && isShowDown != 0"
              round
              class="downOff"
              v-show="isDown"
              v-hasPermi="['doc:qa:updateStatus']"
              @click="getDownOrUp(5)"
              >下架</el-button
            >
            <el-button
              v-if="currentSelectType == 'top' && isShowDown != 0"
              round
              class="downOff"
              v-show="isDown"
              @click="getDownOrUp(5)"
              v-hasPermi="['doc:top:updateStatus']"
              >下架</el-button
            >
          </div>
        </template>
      </SubBtn>
    </Comdrawer>
  </div>
</template>
<script>
import { padding } from "@/assets/styles/variables.scss";
import { getLawListApi, getLawInfoApi } from "@/wss/newApi_3-24/doc/law.js";
import ComSelect from "@/wss/components/comSelect.vue";

import ComTable from "@/wss/components/comTable.vue";
import ComForm from "@/wss/components/comForm.vue";
import NewCard from "@/wss/components/newCard.vue";
import wangEditor from "@/wss/components/wangEditor.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import { changeType, getfilterParams, changeLawType } from "@/wss/utils/wss.js";
import Law from "./law.vue";
import Top from "./top.vue";
import Qa from "./qa.vue";
import Comdrawer from "@/wss/components/Comdrawer.vue";
import {
  getLawEditApi,
  getLawUpdateStatusApi,
} from "@/wss/newApi_3-24/doc/law.js";
import {
  getTopUpdateStatusApi,
  getTopListApi,
  getTopGetInfoInfoApi,
} from "@/wss/newApi_3-24/doc/top.js";

import {
  getQaListApi,
  getQaGetInfoApi,
  getQaUpdateStatusApi,
} from "@/wss/newApi_3-24/doc/qa.js";

export default {
  components: {
    ComTable,
    ComForm,
    NewCard,
    ComSelect,
    Law,
    Top,
    Qa,
    Comdrawer,
    wangEditor,
    SubBtn,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") return callback(new Error("年龄不能为空"));
      value = Number(value);

      if (typeof value == "number") {
        if (value <= 1 && value >= 0) return callback();
      }
      callback(new Error("年龄不能为空"));
    };
    return {
      drawer: false,
      direction: "rtl",

      value: "",
      padding: padding,
      // 标记第一次过滤
      isFirst: true,
      // 查看对话框
      lookDialogVisible: false,
      isFailtrueFilter: false, //是否过滤失败筛选
      // 保存切换失败和正常筛选的数组
      tempFilterArr: [],
      // 类型数组
      typeArr: [],
      dialogVisible: false,
      // 是否再次过滤筛选条件
      isFilter: true,
      // 表格配置
      config: {
        quanxian: "work:crawler:add",
        // border: true,
        isAdd: true,
        loading: false,
      },
      listtable: [],
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 10, status: 0, type1: "law" },
      // 失败和成功状态
      currentStatus: "1",
      // 运行中的数量
      operation: 0,
      activeName: "first",

      // 没有转换过的数据
      noChangeTableList: [],
      // 表单配置
      comForm: {
        modes: [
          {
            formType: "select",
            mode: "status",

            value: "0",
            select: [
              {
                label: "待整理",
                value: "0",
              },
              {
                label: "上架",
                value: "4",
              },
              {
                label: "下架",
                value: "5",
              },
              {
                label: "异常",
                value: "-2",
              },
            ],
          },
          {
            formType: "select",
            mode: "type1",

            value: "law",
            select: [
              {
                label: "政策",
                value: "top",
              },
              {
                label: "问答",
                value: "qa",
              },
              {
                label: "法律",
                value: "law",
              },
            ],
          },
        ],
      },
      // 是否能编辑
      canEdit: true,
      idType: 1,
      // 表格数据
      tableList: [],
      // 表格配置
      tableModes: [
        {
          label: "来源",
          mode: "from",
          width: 250,
        },
        {
          label: "类型",
          mode: "lawType",
          width: 100,
        },
        {
          label: "法律小分类",
          mode: "type",
          width: 100,
        },
        {
          label: "标题",
          mode: "title",
          showOverflowTooltip: true,
        },
        {
          label: "创建时间",
          mode: "createTime",
          showOverflowTooltip: true,
          width: 180,
        },
      ],
      isDown: false,
      drawerTitle: "",

      // 当前的状态
      cuurentStatus: "",
      //修改内容定价 提示框显示状态
      dialogFormVisible: false,

      //修改内容定价 标题宽度
      formLabelWidth: "120px",
      dataObject: {},
      currentType: "law",
      // 下架的状态
      isShowDown: 0,
      // 修改后表单
      editFrom: {
        unit: "",
        area: "",
        rank: "",
        timeliness: "",
        releaseDate: "",
        effectiveDate: "",
      },
      // 当前选择的类型
      currentSelectType: "",
    };
  },
  created() {
    this.getLawListFn();
  },

  methods: {
    // 上架

    // 下架操作
    async getDownOrUp(status, row) {
      const _this = this;
      let currentType = _this.currentType;

      let params = { id: _this.dataObject.id || row.id, status: status };

      let result;
      switch (currentType) {
        case "law":
          result = await getLawUpdateStatusApi(params); //修改法条
          break;
        case "top":
          result = await getTopUpdateStatusApi(params); //修改政策
          break;
        case "qa":
          result = await getQaUpdateStatusApi(params); //修改问答
          break;
      }
      if (result.code != 200) return;

      switch (currentType) {
        case "top":
          setTimeout(() => {
            _this.getTopListFn(); //更新政策列表
          }, 1000);
          break;
        case "law":
          setTimeout(() => {
            _this.getLawListFn(); //更新法条列表
          }, 1000);

          break;
        case "qa":
          setTimeout(() => {
            _this.getQaListFn(); //更新问答列表
          }, 1000);

          break;
      }

      _this.drawer = false;
      _this.$message({
        type: "success",
        message: result.msg,
      });
    },
    // 筛选条件发生改变
    ChangeFn(value) {
      const _this = this;
      // 为NAN是字符串，就不退出（字符串是类型，状态是数字）
      if (!Number.isNaN(Number(value))) {
        // 是否显示上架按钮
        value == 0 || value == 5 || this.comForm.modes[0].value=='-2' ? (_this.canEdit = true) : (_this.canEdit = false);
        // 是否显示下架按钮
        value == 4 ? (_this.isDown = true) : (_this.isDown = false);
        this.isShowDown = value;
        return;
      } else {
        this.currentSelectType = value;
      }
      // 让页容量变为1和10
      _this.pageing.pageNum = 1;
      _this.pageing.pageSize = 10;

      // 当前的类型
      this.currentType = value;
      // 法律和问答政策表格字段不一致，因此要区分
      if (value != "law") {
        // 政策和问答
        _this.comForm = {
          modes: [
            {
              formType: "select",
              mode: "status",

              value: "4",
              select: [
                {
                  label: "上架",
                  value: "4",
                },
                {
                  label: "下架",
                  value: "5",
                },
              ],
            },
            {
              formType: "select",
              mode: "type1",

              value: value,
              select: [
                {
                  label: "政策",
                  value: "top",
                },
                {
                  label: "问答",
                  value: "qa",
                },
                {
                  label: "法律",
                  value: "law",
                },
              ],
            },
          ],
        };
        
      } else {
        _this.comForm = {
          modes: [
            {
              formType: "select",
              mode: "status",

              value: "0",
              select: [
                {
                  label: "待编辑",
                  value: "0",
                },
                {
                  label: "上架",
                  value: "4",
                },
                {
                  label: "下架",
                  value: "5",
                },
                {
                  label: "异常",
                  value: "-2",
                },
              ],
            },
            {
              formType: "select",
              mode: "type1",

              value: value,
              select: [
                {
                  label: "政策",
                  value: "top",
                },
                {
                  label: "问答",
                  value: "qa",
                },
                {
                  label: "法律",
                  value: "law",
                },
              ],
            },
          ],
        };
      }
    },
    // 表格行被双击
    async dbClickFn(row) {
      const _this = this;
      // 如果是下架就显示下架按钮
      if (row.status == 5) _this.isDown = false;
      let currentStatus = "",
        result = "",
        cuurentType = "";

      let lawSmall = [
        "法律",
        "宪法",
        "司法解释",
        "行政法规",
        "监察法规",
        "决定",
        "地方性法规",
        "地方规章",
        "部门规章",
        "规范性文件",
        "行业规范",
        "行业标准",
      ];
      // 法规，有的law type属性数据是undefined所以拿lawType再做一次判断
      if (lawSmall.includes(row.type) || row.lawType == "法条") {
        currentStatus = "编辑";
        cuurentType = 1;
        result = JSON.parse(JSON.stringify(await getLawInfoApi(row.id)));
        // 头条
      } else if (this.currentSelectType == "top") {
        currentStatus = "查看内容";
        cuurentType = 2;
        result = JSON.parse(JSON.stringify(await getTopGetInfoInfoApi(row.id)));
        // 问答
      } else {
        currentStatus = "查看内容";
        cuurentType = 3;
        result = JSON.parse(JSON.stringify(await getQaGetInfoApi(row.id)));
        console.log(result);
        result.data.type = "问答";
      }

      if (result.code != 200) return;
      _this.dataObject = {};
      _this.dataObject = result.data;

      // 抽屉的标题
      _this.drawerTitle = `${currentStatus}`;

      _this.idType = cuurentType;
      // 让编辑抽屉显示
      if (lawSmall.includes(row.type) || row.lawType == "法条") {
        setTimeout(() => {
          _this.$refs.law.setDomStyle();
        }, 0);
      }

      _this.drawer = true;
    },
    // 获取头条列表数据
    async getTopListFn() {
      const _this = this;
      let { code, data } = await getTopListApi(_this.pageing);
      if (code != 200) return;

      _this.tableList = JSON.parse(JSON.stringify(data.rows));
      _this.pageing.total = data.total;
    },

    // 提交按钮
    async submit() {
      const _this = this;
      let dataObject = _this.dataObject;
      dataObject.files = this.$refs.law.getBase64Fn();
      dataObject.info.forEach((item) => {
        if (item.isSelect) item.status = "2";
      });

      let { code, msg } = await getLawEditApi(_this.dataObject);
      if (code != 200) return;
      _this.$message({
        type: "success",
        message: msg,
      });
      _this.drawer = false;

      // 法条修改的比较慢，修改之后要多刷新很多次
      setTimeout(()=>{
        _this.getLawListFn();
      },9000)
      
      // 获取当前修改的法条的位置(在前端删掉)
      let index = this.tableList.findIndex((item) => item.id == dataObject.id);
      this.tableList.splice(index,1)// 根据下标去删数据
    },

    // 获取法律列表数据
    async getLawListFn() {
      this.tableModes = [
        {
          label: "来源",
          mode: "from",
          width: 250,
        },
        {
          label: "类型",
          mode: "lawType",
          width: 100,
        },
        {
          label: "法律小分类",
          mode: "type",
          width: 100,
        },

        {
          label: "标题",
          mode: "title",
          showOverflowTooltip: true,
        },
        {
          label: "创建时间",
          mode: "createTime",
          showOverflowTooltip: true,
          width: 180,
        },
      ];
      let { code, data } = await getLawListApi(this.pageing);
      if (code != 200) return;
      let tableList = JSON.parse(JSON.stringify(data)).rows;
      tableList.forEach((item) => {
        item.lawType = "法条";
        item.type = changeLawType(item.type);
      });

      this.pageing.total = data.total;
      this.tableList = tableList;
    },

    //   新建
    add(text) {
      switch (text) {
        case "top":
          this.idType = 2;
          text = "政策";
          break;
        case "qa":
          this.idType = 3;
          text = "问答";
          break;
      }
      this.drawer = true;
      this.drawerTitle = `新增-${text}`;
    },
    // 重设
    reset() {
      const _this = this;
      this.pageing = { pageNum: 1, pageSize: 10, total: 0, type1: "law" };
      // 初始化表格字段
      _this.comForm = {
        modes: [
          {
            formType: "select",
            mode: "status",
            value: "0",
            select: [
              {
                label: "上架",
                value: "4",
              },
              {
                label: "下架",
                value: "2",
              },
              {
                label: "编辑",
                value: "0",
              },
            ],
          },
          {
            formType: "select",
            mode: "type1",

            value: "law",
            select: [
              {
                label: "政策",
                value: "top",
              },
              {
                label: "问答",
                value: "qa",
              },
              {
                label: "法律",
                value: "law",
              },
            ],
          },
        ],
      };
    },
    // 抽屉关闭时
    handleClose() {
      const _this = this;
      _this.drawer = false;
      _this.dataObject = {};
    },

    // // 编辑
    // edit() {
    //   //
    //   this.dialogFormVisible = true;
    // },
    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      const _this = this;
      this.pageing.pageNum = pageNum;
      // 判断当前分页的是那个类型
      switch (_this.pageing.type1) {
        case "top":
          setTimeout(() => {
            _this.getTopListFn();
          }, 10);
          break;
        case "law":
          setTimeout(() => {
            _this.getLawListFn();
          }, 10);

          break;
        case "qa":
          setTimeout(() => {
            _this.getQaListFn();
          }, 10);

          break;
      }
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      const _this = this;
      _this.pageing.pageSize = pageSize;
      // 判断当前分页的是那个类型
      switch (_this.pageing.type1) {
        case "top":
          _this.getTopListFn();
          break;
        case "law":
          _this.getLawListFn();
          break;
        case "qa":
          _this.getQaListFn();
          break;
      }
    },
    // getfilterParamsFn(tableList) {
    //   let s = new Set();
    //   for (let index = 0; index < tableList.length; index++) {
    //     s.add(tableList[index].type);
    //     // const element = tableList[index];
    //   }
    //   let arr = Array.from(s, (item) => {
    //     return {
    //       type: item,
    //     };
    //   });
    //   return getfilterParams(arr);
    // },

    // 获取问答列表数据
    async getQaListFn() {
      const _this = this;
      let { code, data } = await getQaListApi(_this.pageing);
      if (code != 200) return;
      let tableList = JSON.parse(JSON.stringify(data.rows));
      tableList.forEach((item) => {
        item.type = "问答";
      });
      _this.tableList = tableList;
      _this.pageing.total = data.total;
    },

    inquireFn(paramsArr) {
      let { pageing } = this;
      //获取筛选数据
      paramsArr.forEach((item) => {
        for (const key in item) {
          this.pageing[key] = item[key];
        }
      });
      // 是否显示下架按钮
      this.isDown = true;
      // 当前筛选的type是否是法律
      if (this.pageing.type1 == "law") {
        this.currentSelectType = "law";
        this.idType = 1;
        this.getLawListFn();
        // 当前筛选的type是否是头条
      } else if (this.pageing.type1 == "top") {
        this.currentSelectType = "top";
        // 政策和问答的表格字段和法律的表格字段不一致所以切换时要换回来
        this.tableModes = [
          {
            label: "来源",
            mode: "from",
            width: 250,
          },
          {
            label: "类型",
            mode: "type",
            width: 200,
          },

          {
            label: "标题",
            mode: "title",
            showOverflowTooltip: true,
          },
          {
            label: "创建时间",
            mode: "createTime",
            showOverflowTooltip: true,
          },
        ];
        this.idType = 2;
        this.getTopListFn();
      } else if (this.pageing.type1 == "qa") {
        // 政策和问答的表格字段和法律的表格字段不一致所以切换时要换回来
        this.tableModes = [
          {
            label: "来源",
            mode: "from",
            width: 250,
          },
          {
            label: "类型",
            mode: "type",
            width: 200,
          },

          {
            label: "标题",
            mode: "title",
            showOverflowTooltip: true,
          },
          {
            label: "创建时间",
            mode: "createTime",
            showOverflowTooltip: true,
          },
        ];
        this.currentSelectType = "qa";

        this.idType = 3;
        this.getQaListFn();
      }
      // 每次搜索让表格当前页数重设到1
      pageing.pageNum = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-box {
  height: calc(100% - 60px);
}
.label-box-content,
.label-box-content .el-row,
.label-box-content .el-col {
  height: 100%;
}
.editFrom-box {
  height: 100%;
}

::v-deep .label-box-content .el-card__body {
  height: 100%;
  position: relative;
}
::v-deep .label-box-content .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}

.container {
  padding: 10px;
  background-color: rgba(123, 123, 123, 0.2);
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  ::v-deep .el-card {
    border-radius: 0;
    border: 0;
  }
  ::v-deep .el-tabs__nav-scroll {
    overflow: hidden;
    background: #ffffff;

    box-sizing: border-box;
    padding-left: 20px;
    height: 70px;
    line-height: 70px;
  }
  ::v-deep .el-tabs__item.is-active,
  ::v-deep .el-tabs__item:hover {
    color: #f97f2a;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: transparent;
  }
  // ::v-deep .el-tabs__item:hover {
  //   color: #f97f2a;
  // }
}
::v-deep .el-drawer {
  padding: 0px 30px;
}
::v-deep .el-drawer__header {
  padding: 0px;
}
::v-deep .container .right {
  margin-top: 0px;
}
::v-deep .el-form-item {
  margin-bottom: 0px;
  margin-top: 8px;
}
.content-box {
  display: flex;
  height: 100%;
  .table {
    flex: 1.5;
  }
  .edit-box {
    flex: 0.5;
  }
}

// 隐藏重设按钮
::v-deep .content-box .right .right .el-button--default {
  display: none;
}

.editFrom-box .el-form {
  margin-bottom: 60px;
}
::v-deep .editFrom-box .el-form-item {
  margin-bottom: 20px;
}
::v-deep .editFrom-box .el-input {
  width: 100%;
}
::v-deep .editFrom-box .el-form-item__label {
  color: #2e3f5e;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  z-index: 10002;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}

// margin-bottom: 10px;
.el-button {
  padding: 6px 15px;
  font-size: 14px;
  color: #fff !important;
}
.buttonBox .el-button{
  font-size: 14px;
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff !important;
}

::v-deep .el-drawer__header .el-button--medium {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff !important;
}

::v-deep .el-drawer__header {
  margin: 0px;
}
// 上架按钮
.upBtn {
  cursor: pointer;
  color: #f87a23 !important;
}
::v-deep .el-drawer__wrapper {
  // z-index: 2015 !important;
}
</style>